<template>
  <a-modal :title="title" :width="width" :visible="visible" @ok="handleCancel" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
    <BasicTable @register="registerTable" :loading="loading" :pagination="{ pageSize: 20 }"> </BasicTable>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, nextTick, defineExpose } from 'vue';  
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { itemRecordslist } from '../LabWtemporarily.api';
  import { columnsRecord } from '../LabWtemporarily.data';
  const loading = ref(false);
  const title = ref<string>('');
  const width = ref<number>(1000);
  const visible = ref<boolean>(false);
  const disableSubmit = ref<boolean>(false);
  const emit = defineEmits(['register', 'success']);
  let queryParam={}
  // 注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      api: itemRecordslist,
      columns: columnsRecord,
      canResize: false,
      useSearchForm: false,
      showIndexColumn: true,
      showTableSetting: false,
      showActionColumn: false,
      beforeFetch: (params) => {
        console.log('queryParam',queryParam)
        return Object.assign(params, queryParam);
      },
    },
  });

  const [registerTable, { reload}] = tableContext;
  
  /**
   * 编辑
   * @param record
   */
  function openModel(record) {
    title.value = '实验记录';
    visible.value = true;
    queryParam = record;
    nextTick(() => {
      reload();
    });
  }
  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false;
  }

  defineExpose({
    openModel,
    reload,
  });
</script>

<style>
  /**隐藏样式-modal确定按钮 */
  .jee-hidden {
    display: none !important;
  }
</style>
